---
title: Coche
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

Représente une action réussie ou complétée.

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

Étend `React.ComponentPropsWithoutRef<'div'>` et accepte tous les props d'un élément `div` normal.

</Tab>

</Tabs>

## Coche animée

Représente une icône de coche avec la fonctionnalité d'animation ajoutée.

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés  | Type    | Description                         | Par défaut   |
| ----------- | ------- | ----------------------------------- | ------------ |
| isAnimating | booléen | Contrôle si la coche est animée     | faux         |
| couleur     | chaîne  | Couleur de la coche                 |              |
| durée       | nombre  | La durée de l'animation en secondes | 0,5 secondes |
| taille      | nombre  | La taille de la coche               | 28 pixels    |

</Tab>

</Tabs>
